<template>
  <div class="side-bar-content-wrapper">
    <div class="side-bar-content">
      <a-tree checkable defaultExpandAll v-model:checkedKeys="checkedKeys" @check="onCheck">
        <a-tree-node v-for="(e, i) in items" :key="e.name" :title="e.title" is-leaf />
      </a-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'side-bar-content',
  components: { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined },
  setup() {
    const items_ = [
      {
        name: 'layers',
        title: '图层设置',
        icon: 'SwitcherOutlined'
      },
      {
        name: 'scene',
        title: '场景效果',
        icon: 'PictureOutlined'
      },
      {
        name: 'other',
        title: '其它选项',
        icon: 'SettingOutlined'
      }
    ];
    return { items_ };
  },
  props: {
    dataSrc: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      activeItem: '',
      checkedKeys: []
    };
  },
  computed: {
    items() {
      return this.dataSrc.items || this.items_;
    }
  },
  watch: {},
  methods: {
    onCheck(e) {
      console.log(e);
    }
  }
});
</script>

<style lang="less">
.side-bar-content-wrapper {
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  .side-bar-content {
    height: 100%;
    width: 100%;
    overflow: hidden;

    :deep(.ant-tree) {
      overflow: hidden;
      li {
        .ant-tree-node-content-wrapper {
          &:hover {
            background-color: rgba(0, 200, 255, 0.2);
          }
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
          &:hover {
            background-color: transparent;
          }
        }
        .ant-tree-node-content-wrapper .ant-tree-title {
          color: white;
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper .ant-tree-title {
          color: gray;
        }
      }
    }
  }
}
</style>
